<script lang="ts" name="AppSettings" setup>
import router from "../route";
import useSettings from "../hooks/UseSettings";
const {timercolor,countdown,describecolor,iconcolor,customdescription,customtext,updateCountDown,updateTimerColor,updateDescribeColor,updateIconColor,updateDescribeValue,updateDescribeText} = useSettings()
/**
 * 修改自定义描述信息
 * @param value
 */
const updatecustomdescription = (value):void =>{
  updateDescribeValue(value)
}
/**
 * 自定义的展示文字
 * @param value
 */
const custominput = (value):void=>{
  updateDescribeText(value)
}
</script>

<template>
  <div class="appsettings">
    <div class="AlarmClockdrag drag">我可拖动</div>
    <el-row>
      <el-col :span="5">
        <div class="grid-content ep-bg-purple leftmenu">
          <span class="leftmenuicon">
            <el-button type="primary" link icon="CaretLeft" size="small" @click="router.go(-1)">返回</el-button>
          </span>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="grid-content ep-bg-purple-light" style="height: 85px;overflow-x: hidden;overflow-y: auto;">
          <div style="margin-bottom: 5px">
            时间颜色：
          </div>
          <el-radio-group v-model="timercolor" @change="updateTimerColor">
            <el-radio label="#409EFF" size="small">蓝色</el-radio>
            <el-radio label="#fbb612" size="small">橙色</el-radio>
            <el-radio label="#ee3f4d" size="small">红色</el-radio>
            <el-radio label="#7e2065" size="small">紫色</el-radio>
            <el-radio label="#67C23A" size="small">绿色</el-radio>
            <el-radio label="#000000" size="small">默认</el-radio>
          </el-radio-group>
          <div style="margin-bottom: 5px">
            描述颜色：
          </div>
          <el-radio-group v-model="describecolor" @change="updateDescribeColor">
            <el-radio label="#409EFF" size="small">蓝色</el-radio>
            <el-radio label="#fbb612" size="small">橙色</el-radio>
            <el-radio label="#ee3f4d" size="small">红色</el-radio>
            <el-radio label="#7e2065" size="small">紫色</el-radio>
            <el-radio label="#67C23A" size="small">绿色</el-radio>
            <el-radio label="#000000" size="small">默认</el-radio>
          </el-radio-group>
          <div style="margin-bottom: 5px">
            设置图标颜色：
          </div>
          <el-radio-group v-model="iconcolor" @change="updateIconColor">
            <el-radio label="#409EFF" size="small">蓝色</el-radio>
            <el-radio label="#fbb612" size="small">橙色</el-radio>
            <el-radio label="#ee3f4d" size="small">红色</el-radio>
            <el-radio label="#7e2065" size="small">紫色</el-radio>
            <el-radio label="#67C23A" size="small">绿色</el-radio>
            <el-radio label="#000000" size="small">默认</el-radio>
          </el-radio-group>
          <div style="margin-bottom: 5px">
            自定义描述：
          </div>
          <el-radio-group v-model="customdescription" @change="updatecustomdescription">
            <el-radio label="default" size="small">默认</el-radio>
            <el-radio label="custom" size="small">自定义</el-radio>
          </el-radio-group>
          <div v-if="customdescription==='custom'" style="margin-bottom: 5px">
            <el-input
                v-model="customtext"
                style="width: 90%;"
                class="w-50 m-2"
                @input="custominput"
                size="small"
                placeholder="请输入描述信息"
            />
          </div>
          <div style="margin-bottom: 5px">
            选择倒计时时间：
          </div>
          <el-radio-group v-model="countdown" @change="updateCountDown">
            <el-radio label="01" size="small">01分钟</el-radio>
            <el-radio label="02" size="small">02分钟</el-radio>
            <el-radio label="05" size="small">05分钟</el-radio>
            <el-radio label="08" size="small">08分钟</el-radio>
            <el-radio label="10" size="small">10分钟</el-radio>
            <el-radio label="15" size="small">15分钟</el-radio>
            <el-radio label="20" size="small">20分钟</el-radio>
            <el-radio label="30" size="small">30分钟</el-radio>
            <el-radio label="45" size="small">45分钟</el-radio>
          </el-radio-group>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="less" scoped>
.appsettings{
  background-color: white;
  height: 100px;
  .AlarmClockdrag {
    height: 15px;
    line-height: 15px;
    background-color: #409EFF;
    font-size: 0.5em;
    text-align: center;
  }
  .leftmenu{
    height: 85px;
    .leftmenuicon{
      text-align: center;
    }
  }
}
</style>
